<!-- <div class="starter-template">
  <h1 translate lib="web">entities</h1>
</div> -->
<div class="row">
  <div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
  <table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
    <thead class="thead-dark">
      <tr>
        <th ng-click="ctrl.ToggleOrder('name')"><strong translate lib="web">name</strong></th>
        <th ng-click="ctrl.ToggleOrder('_createdby')"><strong translate lib="web">createdby</strong></th>
        <th ng-click="ctrl.ToggleOrder('_modified')"><strong translate lib="web">updated</strong></th>
        <th ng-click="ctrl.ToggleOrder('_version')"><strong translate lib="web">version</strong></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="model in ctrl.models" ng-style="model._deleted != null && {'color':'crimson'}">
        <td>
          {{model.name}}
        </td>
        <td>{{model._createdby}}</td>
        <td>
          <div ng-show="model._deleted != null">
            <timesince ng-model="model._deleted" />
          </div>
          <div ng-show="model._deleted == null">
            <timesince ng-model="model._modified" />
          </div>

        </td>
        <td>{{model._version}}</td>
        <td class="btn-cell" ng-show="!ctrl.isNew">
          <a href ng-click="ctrl.CompareNow(model)" class="btn"><em class="fas fa-eye"></em></a>
          <a href ng-click="ctrl.CompareThen(model)" class="btn"><em class="fas fa-history"></em></a>
          <a href ng-click="ctrl.RevertTo(model)" class="btn"><em class="fas fa-trash-restore"></em></a>
          <a href ng-click="ctrl.DownloadVersion(model)" class="btn"><em class="fas fa-file-download"></em></a>
          <a href ng-click="ctrl.DownloadVersion(model, true)" ng-show="model._type=='workflow'" class="btn" translate
            lib="web">XAML</a>
        </td>
        <td class="btn-cell" ng-show="ctrl.isNew">
          <a href ng-click="ctrl.ShowVersion(model)" class="btn"><em class="fas fa-eye"></em></a>
          <a href ng-click="ctrl.RevertTo(model)" class="btn"><em class="fas fa-trash-restore"></em></a>
          <a href ng-click="ctrl.DownloadVersion(model)" class="btn"><em class="fas fa-file-download"></em></a>
          <a href ng-click="ctrl.DownloadVersion(model, true)" ng-show="model._type=='workflow'" class="btn" translate
            lib="web">XAML</a>
        </td>
      </tr>
    </tbody>
  </table>


  <div class="modal modal-full" tabindex="-1" role="dialog" id="exampleModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ctrl.model.name}} </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="visual"></div>
          <hr />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>